<template>
    <div class="reach-table" id="reachTable">
        <div class="model-head">
            <span class="title">达成度统计表</span>
            <span class="set-btn">
                <i class="iconfont icon-shezhi"></i>
                <router-link
                    :to="{
                        name: 'ReachDegree',
                        query: { id }
                    }"
                    tag="span"
                    class="set-text"
                >
                    达成度设置
                </router-link>
            </span>
            <span
                class="up-btn"
                @click="openUpload(2)"
            >
                <span class="iconfont icon-shangchuan-"></span>
                <span>批量导入成绩</span>
            </span>
            <span class="down-btn">
                <span class="iconfont icon-tubiaozhizuo-"></span>
                <span @click="downLoadData">整体数据</span>
            </span>
        </div>

        <div class="model-body">
            <template
                v-for="( obj, index ) in tableList"
            >
                <div
                    v-if="obj.checkId"
                    class="table-item single-result"
                >
                    <div class="table-item-head">
                        <img class="icon1" src="../../../../../../assets/images/statistics/table-icon.png" alt="">
                        <span class="item-name">{{ obj.checkName }}</span>
                        <span
                            class="up-btn"
                            @click="openUpload(3, obj)"
                        >
                            <span class="iconfont icon-shangchuan-"></span>
                            <span>导入成绩</span>
                        </span>
                        <span class="fn-btn">
                            <span class="iconfont icon-gongshi"></span>
                            <el-tooltip class="item" effect="dark" placement="bottom-start">
                                <div slot="content">
                                    <p class="item-tips">
                                        课程目标考核分项成绩=导入成绩平均值 * (100/满分) * 考核分项权重值 * 考核项权重值 * 课程目标权重值 <br/>
                                        考核分项成绩 = 课程目标考核分项成绩加和<br/>
                                        考核项成绩 = 考核分项成绩加和<br/>
                                    </p>
                                    <p class="item-tips">
                                        课程目标考核分项满分= 100 * 考核分项权重值 * 考核项权重值 * 课程目标权重值<br/>
                                        考核分项满分 = 课程目标考核分项满分加和<br/>
                                        考核项满分 = 考核分项满分加和<br/>
                                    </p>
                                    <p class="item-tips">
                                        考核分项期望值 =  考核分项满分 * 阈值<br/>
                                        考核项期望值 =  考核项满分 * 阈值<br/>
                                    </p>
                                </div>
                                <span>查看公式</span>
                            </el-tooltip>
                        </span>
                        <span class="full-num">
                            <span>满分：</span>
                            <span class="num">{{ obj.fullMark }}分</span>
                        </span>

                        <span class="result">
                            <span>成绩：</span>
                            <span class="num">{{ obj.grade }}分</span>
                        </span>
                    </div>
                    <el-table
                        :data="obj.content"
                        border
                        style="width: 100%"
                        :highlight-current-row="true"
                        header-cell-class-name="table-head"
                        row-class-name="table-body"
                    >
                        <el-table-column
                            v-for="(items, index) in column"
                            :fixed="index == 0 ? true : false"
                            :label="items.label"
                            :prop="items.prop"
                            :key="index"
                            :show-overflow-tooltip="true"
                            width="140"
                        >
                            <template slot-scope="scope">
                                <div>
                                    <p>
                                        <span class="item-title">{{ scope.row.name  }}</span>
                                        <img  v-if="scope.row.isRefSys" class="client-icon" src="../../../../../../assets/images/statistics/client.png" alt="">
                                    </p>
                                    <p
                                        v-if="scope.$index != (obj.content.length - 1)"
                                        :class="[scope.row.isSetWeight ? 'setWeight-R' : 'setWeight-G']"
                                        class="setWeight"
                                        @click="setWeight(scope.row.subId)"
                                    >
                                        设置目标权重
                                    </p>
                                </div>
                            </template>
                            <template v-if="items.children">
                                <el-table-column
                                    v-for="(item, i) in items.children"
                                    :label="item.label"
                                    :key="i"
                                    :width="item.width"
                                >
                                    <template slot-scope="scope">
                                        <span>{{ scope.row | format(index,i) }}</span>
                                    </template>
                                </el-table-column>
                            </template>
                        </el-table-column>

                    </el-table>
                </div>

                <div
                    v-else
                    class="table-item sum-result"
                >
                    <div class="table-item-head">
                        <img class="icon1" src="../../../../../../assets/images/statistics/table-icon1.png" alt="">
                        <span class="item-name">{{ obj.checkName }}</span>
                        <span class="full-num">
                            <span>满分：</span>
                            <span class="num">{{ obj.fullMark }}分</span>
                        </span>

                        <span class="result">
                            <span>成绩：</span>
                            <span class="num">{{ obj.grade }}分</span>
                        </span>
                    </div>
                    <el-table
                        :data="obj.content"
                        :span-method="arraySpanMethod"
                        border
                        style="width: 100%"
                        :highlight-current-row="true"
                        header-cell-class-name="table-head"
                        row-class-name="table-body"
                    >
                        <el-table-column
                            v-for="(items, index) in column"
                            :fixed="index == 0 ? true : false"
                            :label="items.label"
                            :prop="items.prop"
                            :key="index"
                            width="140"
                        >
                            <template
                                v-if="items.children"
                            >
                                <el-table-column
                                    v-for="(item, i) in items.children"
                                    :label="item.label"
                                    :key="i"
                                    :width="item.width"
                                >
                                    <template  slot-scope="scope">
                                        <span v-if="scope.$index == 0">
                                            {{ scope.row | format(index,i) }}
                                        </span>
                                        <span  v-if="scope.$index == 1 && index <= column.length - 2">
                                            {{ scope.row | format(index, i) }}
                                        </span>
                                    </template>
                                </el-table-column>
                            </template>

                        </el-table-column>

                    </el-table>
                </div>
            </template>
            <div
                v-if="!tableList.length"
                v-loading="loading"
                element-loading-text="拼命加载中"
                class="no-info"
            >
                <img v-if="!loading" src='../../../../../../assets/images/empty.png'/>
                <p v-if="!loading">暂无数据</p>
            </div>
        </div>

        <importDialog
            ref="importDialog"
            @refresh="init"
        />

        <setWeightDialog
            ref="setWeightDialog"
            @refresh="init"
        />
    </div>
</template>

<script>
import importDialog from '../importUpload';
import eventBus from '../../../../../../utils/eventBus';
import setWeightDialog from '../courseTarget/component/setWeightDialog';
import { reachTableList, downLoadAllScoreData, getCourseTargetWeight } from '../../../../../../api/courseReach';
import { downLoadFile } from '../../../../../../utils/common';
export default {
    components: {
        importDialog,
        setWeightDialog
    },
    props: ['id','name'],
    filters: {
        format(obj, index, i) {
            const itemArr = obj.num[index - 1];
            if (itemArr) {
                return itemArr[i];
            }
        }
    },

    data() {
        return {
            loading: false,
            that: this,
            len: null,
            tableList: [],
            column: [
                {
                    label: '分项目',
                    prop: 'name',
                    width: "130"
                },
            ]
        }
    },

    watch: {
        id() {
            this.init();
        }
    },

    created() {
        this.init();
        eventBus.$on('refreshTable',()=>{
            this.init();
        });
    },

    methods: {
        arraySpanMethod({ row, column, rowIndex, columnIndex }) {
            if (rowIndex == this.len ) {
                if (columnIndex !== 0) {
                    return [1, 2];
                }
            }
        },

        init() {
            this.tableList.length = 0;
            this.column.length = 1;
            this.loading = true;
            reachTableList({
                concludeId: this.id
            }).then((res) => {
                eventBus.$emit('initHub');
                this.loading = false;
                const { data } = res;

                if (data) {
                    const { header } = data[0];

                    const len = header.courseHeaderVO.length;

                    const W = len > 4 ? 194 : Math.floor(970/len);

                    this.column.push({
                        label: '合计分数',
                        width: `${W}`,
                        children: [
                            {
                                label: '期望/满分',
                                width: `${W/2}`
                            },
                            {
                                label: '成绩',
                                width: `${W/2}`
                            }
                        ]
                    });

                    for(var i = 1; i < len; i++ ) {

                        this.column.push({
                            label: `课程目标${ i > 9 ? i : '0' + i }`,
                            width: `${W}`,
                            children: [
                                {
                                    label: '满分',
                                    width: `${W/2}`
                                },
                                {
                                    label: '成绩',
                                    width: `${W/2}`,
                                }
                            ]
                        });
                    };

                    data.forEach((item) => {
                        const { checkName, checkId, content, fullMark, grade } = item;
                        // let data = null;
                        if (!checkId) {
                            this.len = content.length - 1;
                            // content[1].rowContent = ["达成度", "0.24", "0", "2", "0", "1", '3']
                            // data =  this.dataList(content);
                        }

                        const data =  this.dataList(content);


                        this.tableList.push({ checkId, checkName, content: data, fullMark, grade });
                    });
                }

            }).catch((err) => {
                eventBus.$emit('initHub');
                this.loading = false;
            })
        },

        dataList(data) {
            const contentData = [];
            const length = data.length;
            data.forEach((item, index) => {
                const { isRefSys,  rowContent, subId, isSetWeight} = item;
                const obj = {
                    name: '',
                    subId,
                    isRefSys,
                    isSetWeight,
                    num: []
                };
                obj.name = rowContent.shift();
                const len = rowContent.length;
                const n = 2;
                let lineNum = len % 2 === 0 ? len / 2 : Math.floor( (len / 2) + 1 );
                for (let i = 0; i < lineNum; i++) {
                    let temp = rowContent.slice(i*n, i*n+n);
                    obj.num.push(temp);
                }
                contentData.push(obj);
            });

            return contentData;
        },

        openUpload(type, obj) {
            this.$refs.importDialog.init(type, this.id, obj);
        },

        downLoadData() {
            downLoadAllScoreData({
                concludeId: this.id
            }).then(async (res) => {
                const mimeType = 'application/vnd.ms-excel';
                if (res.type == mimeType) {
                    downLoadFile(new Blob([res]), `${this.name}-整体数据.xls`, mimeType);
                } else {
                    const { message } = JSON.parse(await (new Response(res)).text());
                    this.$message.error(message);
                }
            })
        },

        setWeight(id) {
            getCourseTargetWeight({
                subId: id
            }).then((res) => {
                const { courseParams } = res.data;

                if (courseParams.length) {
                    this.$refs.setWeightDialog.init(res.data);
                } else {
                    this.$message.warning('您暂未关联课程目标！');
                }

            }).catch(() => {

            });

        }
    },
    beforeDestroy () {
        eventBus.$off('initHub');
    }
}
</script>

<style lang="scss">
.reach-table {

    .item-title {
        max-width: 100px;
        overflow: hidden;
        display: inline-block;
        vertical-align: middle;
        text-overflow: ellipsis;
    }

    .setWeight {
        font-size: 12px;
        font-weight: 400;
        margin: 10px auto 0;
        line-height: 17px;
        cursor: pointer;
    }

    .setWeight-R {
        color: #F56C6C;
        width: 80px;
        height: 17px;
        background: #FEF0F0;
        border: 1px solid #FDE2E2;
        border-radius: 2px;
        &:hover {
            background: #f56c6c;
            border-color: #f56c6c;
            color: #fff;
        }
    }

    .setWeight-G {
        color: #74C55C;
        width: 80px;
        height: 17px;
        background: #F0F9EB;
        border: 1px solid #E1F3D8;
        border-radius: 2px;
        &:hover {
            background: #67c23a;
            border-color: #67c23a;
            color: #fff;
        }
    }

    .el-table__body-wrapper {
        &::-webkit-scrollbar{
            width: 4px;
            height: 4px;
            background-color: rgba(0,0,0,0.03);
        }
        &::-webkit-scrollbar-thumb {
            background:rgba(220, 221, 221, 1);
        }
    }

    .el-table__fixed {
        height: 100% !important;
    }

    .client-icon {
        width: 13px;
        height: 13px;
        margin-left: 6px;
        margin-top: 2px;
    }
    .el-icon-setting {
        font-size: 16px;
        vertical-align: middle;
    }

    .single-result, .sum-result {
        .table-head {
            font-size: 16px;
            font-weight: bold;
            border-right: 4px solid #fff;
            border-bottom: 4px solid #fff;

        }

        thead .is-leaf {
            border-bottom: 4px solid #fff;
        }

        .el-table--border, .el-table--group {
            border: 0;
        }
        .el-table--border::after, .el-table--group::after {
            width: 0;
        }

        .el-table::before, .el-table__fixed::before {
            height: 0;
        }

        .table-body {
            td {
                border-right: 4px solid #fff;
                font-weight: 400;
                border-bottom: 4px solid #fff;
            }
        }

        .table-body:last-child td {
            background: #EFF4FF;
        }
    }

    .single-result {
        .table-head {
            background: #A6B4EC !important;
            color: #F8F8F8;
        }

        .el-table__body tr.hover-row>td,.el-table__body tr.current-row>td{
            background: #F6F9FF;
        }

        .el-table__body tr:last-child.current-row>td, .el-table__body tr:last-child.hover-row>td {
            background: #EFF4FF;
        }

        .table-body {
            td {
                background: #F6F9FF;
                color: #474747;
            }
        }

        .table-body:last-child td {
            color: #5A72CD;
        }
    }

    .sum-result {
        .table-head {
            background: #89BEEB !important;
            color: #ffffff;
        }


        .el-table__body tr.hover-row>td,.el-table__body tr.current-row>td{
            background: #EFF4FF;
        }

        .el-table__body tr:last-child.current-row>td, .el-table__body tr:last-child.hover-row>td {
            background:#EFF4FF;
        }

        .table-body {
            td {
                background: #EFF4FF;
                color: #1277EB;
                font-weight: bold;
            }
        }

        .table-body:last-child td {
            color: #1277EB;
        }
    }
}

.item-tips {
    line-height: 20px;
}

.item-tips ~ .item-tips {
    margin-top: 20px;
}
</style>

<style lang="scss" scoped>
.reach-table {
    margin-top: 36px;
    .model-head {
        display: flex;
        height: 18px;
        align-items: center;
        .title {
            position: relative;
            color: #385899;
            font-size: 18px;
            font-weight: 400;
            padding-left: 22px;
            &::before {
                content: '';
                top: 0;
                left: 0;
                position: absolute;
                width: 3px;
                height: 18px;
                background: #385899;
            }
        }

        .set-text {
            display: inline-block;
        }

        .set-btn {
            margin-left: auto;
            color: #385899;
            font-size: 14px;
            font-weight: 400;
            cursor: pointer;
            &:hover {
                color: #1277eb;
            }

            .iconfont {
                position: relative;
                top: 1px;
            }
        }

        .up-btn, .down-btn {
            margin-left: 35px;
            cursor: pointer;
            &:hover {
                span {
                    color: #1277eb;
                }
            }

            .iconfont {
                font-size: 16px;
            }

            span {
                display: inline-block;
                color: #385899;
                font-size: 14px;
                font-weight: 400;
            }
        }
    }

    .model-body {
        margin-top: 20px;
        .single-result {
            padding: 25px 45px 30px;
            background: #fff;
            box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.05);
            border-radius: 5px;
            .table-item-head {
                display: flex;
                height: 20px;
                align-items: center;
                margin-bottom: 23px;
                .icon1 {
                    width: 22px;
                    img {
                        width: 100%;
                    }
                }

                .item-name {
                    margin-left: 10px;
                    color: #5A72CD;
                    font-size: 20px;
                    font-weight: bold;
                    margin-right: 20px;
                }

                .fn-btn {
                    margin-left: 28px;
                    .iconfont {
                        font-size: 18px;
                    }
                }

                .up-btn,.fn-btn{
                    position: relative;
                    top: 4px;
                }

                .up-btn {
                    .iconfont {
                        font-size: 16px;
                    }
                }

                .up-btn, .fn-btn {
                    cursor: pointer;
                    &:hover {
                        span {
                            color: #1277EB;
                            cursor: pointer;
                        }
                    }

                    span {
                        display: inline-block;
                        vertical-align: inherit;
                        color: #385899;
                        font-size: 14px;
                        font-weight: 400;
                    }
                }

                .full-num {
                    margin-left: auto;
                }

                .result {
                    margin-left: 64px;
                }

                .full-num {
                    color: #474747;
                    font-size: 16px;
                    font-weight: 400;
                    position: relative;
                    padding-left: 14px;
                    &::before {
                        position: absolute;
                        content: '';
                        width: 4px;
                        height: 12px;
                        background: #1277EB;
                        left: 0;
                        top: 50%;
                        transform: translateY(-50%);
                    }
                    .num {
                        color: #1277EB;
                        font-size: 18px;
                        font-weight: bold;
                    }
                    span {
                        display: inline-block;
                        vertical-align: middle;
                    }
                }
            }

            .result {
                    color: #474747;
                    font-size: 16px;
                    font-weight: 400;
                    position: relative;
                    padding-left: 14px;
                    &::before {
                        position: absolute;
                        content: '';
                        width: 4px;
                        height: 12px;
                        background: #5A72CD;
                        left: 0;
                        top: 50%;
                        transform: translateY(-50%);
                    }
                    .num {
                        color: #5A72CD;
                        font-size: 18px;
                        font-weight: bold;
                    }
                    span {
                        display: inline-block;
                        vertical-align: middle;
                    }
            }
        }

        .sum-result {
            padding: 25px 45px 30px;
            background: #fff;
            box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.05);
            border-radius: 5px;
            .table-item-head {
                display: flex;
                height: 20px;
                align-items: center;
                margin-bottom: 23px;
                .icon1 {
                    width: 22px;
                    img {
                        width: 100%;
                    }
                }

                .item-name {
                    margin-left: 10px;
                    color: #1277EB;
                    font-size: 20px;
                    font-weight: bold;
                    margin-right: 20px;
                }

                .fn-btn {
                    margin-left: 15px;
                    cursor: pointer;
                    &:hover {
                        span {
                            color: #1277EB;
                        }
                    }

                    .iconfont {
                        font-size: 18px;
                    }

                    span {
                        display: inline-block;
                        vertical-align: bottom;
                        color: #385899;
                        font-size: 14px;
                        font-weight: 400;
                    }
                }

                .full-num {
                    margin-left: auto;
                }

                .result {
                    margin-left: 64px;
                }

                .full-num {
                    color: #474747;
                    font-size: 16px;
                    font-weight: 400;
                    position: relative;
                    padding-left: 14px;
                    &::before {
                        position: absolute;
                        content: '';
                        width: 4px;
                        height: 12px;
                        background: #1277EB;
                        left: 0;
                        top: 50%;
                        transform: translateY(-50%);
                    }
                    .num {
                        color: #1277EB;
                        font-size: 18px;
                        font-weight: bold;
                    }
                    span {
                        display: inline-block;
                        vertical-align: middle;
                    }
                }
            }

            .result {
                color: #474747;
                font-size: 16px;
                font-weight: 400;
                position: relative;
                padding-left: 14px;
                &::before {
                    position: absolute;
                    content: '';
                    width: 4px;
                    height: 12px;
                    background: #5A72CD;
                    left: 0;
                    top: 50%;
                    transform: translateY(-50%);
                }
                .num {
                    color: #5A72CD;
                    font-size: 18px;
                    font-weight: bold;
                }
                span {
                    display: inline-block;
                    vertical-align: middle;
                }
            }
        }

        .table-item~.table-item {
            margin-top: 10px;
        }
    }
}
</style>
